<template>
  <div>
    <!-- <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4> -->
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
      <v-tooltip ref="tooltip" style="display:none;"/>
      <v-legend :show="false"/>
      <v-axis dataKey='month' />
      <v-axis dataKey='lineValue' :title="{ offset: 50}" />
      <v-view :end="{x: 1, y: 1}" :scale="{ dataKey: 'lineValue', alias: axisTitlt }">
        <v-line position="month*lineValue" :color="color" :size="3"/>
        <v-stack-bar position="month*barValue" color="bar" />
        <!-- <v-bar position="month*barValue" color="bar" :adjust="adjust" /> -->
      </v-view>

    </v-chart>
  </div>
</template>

<script>
import { DataSet } from '@antv/data-set'

export default {
  name: 'BarAndLine',
  props: {
    title: {
      type: String,
      default: ''
    },
    dataSource: {
      type: Array,
      default: () => [
        { type: '10:10', bar: 200, line: 1000, line2: 100 },
        { type: '10:15', bar: 600, line: 1000, line2: 100 },
        { type: '10:20', bar: 200, line: 1000, line2: 100 },
        { type: '10:25', bar: 900, line: 1000, line2: 100 },
        { type: '10:30', bar: 200, line: 1000, line2: 100 },
        { type: '10:35', bar: 200, line: 1000, line2: 100 },
        { type: '10:40', bar: 100, line: 1000, line2: 100 }
      ]
    },
    height: {
      type: Number,
      default: 250
    },
    lineFields: {
      type: Array,
      default: () => ['dealProbability']
    },
    barFields: {
      type: Array,
      default: () => ['effectiveNumber', 'actualNumber']
    },
    // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
    aliases: {
      type: Array,
      default: () => []
    },
    xField: {
      type: String,
      default: 'month'
    },
    yField: {
      type: String,
      default: ''
    },
    axisTitlt: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      padding: { top: 10, right: 30, bottom: 30, left: 80 },
      scale: [{
        dataKey: 'bar',
        min: 0
      }, {
        dataKey: 'line',
        min: 0
      }],
      adjust: [{
        type: 'dodge',
        marginRatio: 1 / 32
      }],
      color: ['line', ['#67b7dc', '#84b761', '#fdd400', '#cc4748', '#cd82ad', '#2f4074', '#448e4d', '#b7b83f', '#b9783f']]
    }
  },
  computed: {
    data() {
      if (this.yField) {
        return this.dataSource
      }
      const dv = new DataSet.View().source(this.dataSource)
      dv.transform({
        type: 'fold',
        fields: this.lineFields,
        key: 'line',
        value: 'lineValue'
      })
      dv.transform({
        type: 'fold',
        fields: this.barFields,
        key: 'bar',
        value: 'barValue'
      })
      const rows = dv.rows
      rows.forEach(row => { // 替换别名
        for (const item of this.aliases) {
          if (item.field === row.bar) {
            row.bar = item.alias
            // break
          }
          if (item.field === row.line) {
            row.line = item.alias
            // break
          }
        }
      })
      return dv.rows
    }

  }
}
</script>
